<div class="modal-header">
  <h3>添加终端</h3>
</div>
<div class="modal-body">
  <div class="row">
    <div class="col-6">
      <m-key-search [label_text]="'可选终端'" #searchRef></m-key-search>
      <m-api-data-table
        [dataSource]="dataSource"
        [selection]="selection"
        [defaultOption]="defaultOption"
        [searchControl]="searchRef"
      >
        <ng-container mDataTableColumn header="终端别名">
          <ng-template let-name="name">
            <td>{{ name }}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="状态">
          <ng-template let-status="status">
            <td><m-enable-status-text [status]="status"></m-enable-status-text></td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="系统更新">
          <ng-template let-update="need_upgrade">
            <td><m-update-status-text [status]="update"></m-update-status-text></td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="在线">
          <ng-template let-online="online">
            <td><m-online-status-text [status]="online"></m-online-status-text></td>
          </ng-template>
        </ng-container>
      </m-api-data-table>
    </div>
    <div class="col-6">
      <m-key-search [label_text]="'已选终端'" #selectedRef></m-key-search>
      <m-api-data-table
        [dataSource]="selectedService$ | async"
        [selection]="selection"
        [searchControl]="selectedRef"
      >
        <ng-container mDataTableColumn header="终端别名">
          <ng-template let-name="name">
            <td>{{ name }}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="状态">
          <ng-template let-status="online">
            <td>
              <m-online-status-text [status]="status"></m-online-status-text>
            </td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="系统状态">
          <ng-template let-status="need_upgrade">
            <td>
              <m-update-status-text [status]="status"></m-update-status-text>
            </td>
          </ng-template>
        </ng-container>
      </m-api-data-table>
    </div>
  </div>
</div>
<div class="modal-footer">
  <button class="btn btn-secondary" (click)="cancel()">取消</button>
  <button class="btn btn-primary" (click)="save()">保存</button>
</div>
